﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/qlqa.Master" Inherits="System.Web.Mvc.ViewPage<qlqa.Models.Form.OrderForm.OrderForm>" %>

<%@ Import Namespace="qlqa.Delegate.CommonDelegate" %>
<%@ Import Namespace="qlqa.Models.LinQ" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Gọi món
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CustomCss" runat="server">
    <style type="text/css">
        .row
        {
            margin-top: 10px;
        }
        .panel-heading
        {
            height: auto;
            line-height: 0;
        }
        .margin-top
        {
            margin-top: 10px;
        }
        .length3
        {
            width: 35px;
        }
        .height34 {
            height: 34px;
        }
        .panel-body {
            max-height: 380px;overflow-x: hidden;overflow-y: auto;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%
        var commonDelegate = new CommonDelegate();
        var ban = Model.Ban ?? new tb_Ban();
    %>
    <input type="hidden" id="IdHoaDon" value="<%= Model.HoaDon != null ? Model.HoaDon.Id : 0 %>" />
    <input type="hidden" id="IdBan" value="<%= Model.Ban != null ? Model.Ban.Id : 0 %>" />
    <div class="panel-heading">
        <div class="panel-title">
            <i class="fa fa-pencil"></i>Gọi món
        </div>
        <div class="pull-right">
            <button data-style="expand-right" class="btn btn-primary ladda-button" data-target="#ModalThongTinHoaDon" data-toggle="modal" onclick="XemThongTinHoaDon();">
                <span class="ladda-label">Xuất hóa đơn</span><span class="ladda-spinner"></span><div
                    class="ladda-progress" style="width: 0;">
                </div>
            </button>
            <button id="btnThanhToan" data-style="expand-right" class="btn btn-primary ladda-button" onclick="TinhTien();">
                <span class="ladda-label">Thanh toán</span><span class="ladda-spinner"></span><div
                    class="ladda-progress" style="width: 0;">
                </div>
            </button>
            <button id="btnHuyHoaDon" data-style="expand-right" class="btn btn-warning ladda-button" onclick="HuyHoaDon();">
                <span class="ladda-label">Hủy hóa đơn</span><span class="ladda-spinner"></span><div
                    class="ladda-progress" style="width: 0;">
                </div>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="fa fa-th-large"></i>
                        Thông tin bàn
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-blue btn-xs" type="button" data-target="#ModalSelectTable" data-toggle="modal" onclick="LoadBanTrong();">
                            Ghép bàn</button>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>Bàn</th>
                            <th><%= ban.Ten %></th>
                        </tr>
                        <tr>
                            <td>
                                Ghi chú
                            </td>
                            <td>
                                <b><%= ban.GhiChu %></b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Tình trạng
                            </td>
                            <td>
                                <b><%= commonDelegate.GetTrangThaiSuDungBan(ban.TrangThaiSuDung ?? 0) %></b>
                            </td>
                        </tr>
                    </table>
                    <br/>
                    <% if (Model.BanChinh != null)
                       {
                           %>
                        <table class="table table-bordered">
                            <tr>
                                <th colspan="2">Bàn chính</th>
                            </tr>
                            <tr>
                                <th>Bàn</th>
                                <th><a href="/Table/Order/<%= Model.BanChinh.Id %>"><%= Model.BanChinh.Ten%></a></th>
                            </tr>
                            <tr>
                                <td>
                                    Ghi chú
                                </td>
                                <td>
                                    <b><%= Model.BanChinh.GhiChu%></b>
                                </td>
                            </tr>
                        </table>
                        <br />
                           <%
                       } %>
                   
                    <div id="ListBanGhep"></div>
                </div>
            </div>
        </div>

        <div class="col-md-5">
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="fa fa-th-large"></i>Món đã gọi
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-blue btn-xs" type="button" onclick="CapNhatGiaThuc();"> Lưu</button>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-hover table-bordered" id="tbOrder">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th style="width: 170px;">
                                    Món
                                </th>
                                <th>
                                    SL
                                </th>
                                <th>
                                    Giá
                                </th>
                                <th>
                                    Thực giá
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="fa fa-th-large"></i>Thực đơn
                    </div>
                    <div class="pull-right">
                        <%--<button class="btn btn-blue btn-xs" onclick="XemTatCaMonAn();" type="button"> Xem hết</button>--%>
                    </div>
                </div>
                <div class="panel-body">
                     <div class="input-group">
						<input type="text" id="SearchMonAn" class="form-control" placeholder="Tìm kiếm" id="query" name="SearchMonAn" value="">
						<div class="input-group-btn">
						    <button class="btn btn-primary height34" onclick="TimKiemMonAn();"><span class="glyphicons glyphicons-search"></span></button>
						</div>
                    </div>
                    <div class="help-block margin-top-sm" style="width: 100%"><i class="fa fa-bell"></i> Có thể Tìm kiếm cả món ăn và loại món ăn.</div>
                    <div class="table-responsive margin-top">
                        <table class="table table-bordered table-hover" id="tbListMonAn">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tên món</th>
                                    <th>Giá</th>
                                    <th>SL</th>
                                    <th>Chọn</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% if (Model.ListMonAn != null)
                                   {
                                       if (Model.ListMonAn.Any())
                                       {
                                           int stt = 1;
                                           foreach (tb_MonAn item in Model.ListMonAn)
                                           {
                                        %>
                                            <tr>
                                                <td>
                                                    <%= stt %>
                                                </td>
                                                <td>
                                                    <%= item.Ten %>
                                                </td>
                                                <td>
                                                    <%= item.Gia %>
                                                </td>
                                                <td>
                                                    <%--<input id="SoLuong<%=item.Id %>" class="form-control input-sm length3" type="text"
                                        maxlength="3" placeholder="SL" value="1">--%>
                                                    <input id="SoLuong<%= item.Id %>" type="text" class="length3" maxlength="3" placeholder="SL" value="1">
                                                </td>
                                                <td>
                                                    <button class="btn btn-blue btn-xs" type="button" onclick=" ChonMonAjax(<%= item.Id %>); ">
                                                        Chọn</button>
                                                </td>
                                            </tr>
                                    <% stt++;
                                        }
                                    }
                                    else
                                    {
                                    %>
                                        <tr>
                                            <td colspan="5">
                                                Chưa có thực đơn.
                                                <button class="btn btn-blue btn-xs" type="button">
                                                    Thêm món ăn</button>
                                            </td>
                                        </tr>
                                    <%
                                         }
                                    } %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div aria-hidden="true" role="dialog" tabindex="-1" id="ModalSelectTable" class="modal fade"
        style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×</button>
                    <h4 class="modal-title">
                        Chọn bàn để ghép</h4>
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">
                        Đóng</button>
                    <button data-dismiss="modal" class="btn btn-primary" type="button" id="btnChon" onclick="ChonBanGhep()">
                        Chọn</button>
                </div>
            </div>
        </div>
    </div>
    
        <div aria-hidden="true" role="dialog" tabindex="-1" id="ModalThongTinHoaDon" class="modal fade"
             style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            ×</button>
                        <h4 class="modal-title">
                            Thông tin hóa đơn</h4>
                    </div>
                    <div class="modal-body">
                    
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">
                            Đóng</button>
                        <button data-dismiss="modal" class="btn btn-primary" type="button" id="btnInHoaDon" onclick=" DoPrintHoaDon() ">
                            In hóa đơn</button>
                    </div>
                </div>
            </div>
        </div>
    </div>   
        <div class="modal fade" id="divThongTin" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        <i class="fa fa-lock">&nbsp;</i> Thông báo
                    </h4>
                </div>
                <div class="modal-body" id="divNoiDungThongBao">
                   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Đóng </button>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="CustomScript" runat="server">
    <script src="/Content/scripts/BanAn/BanAn.js" type="text/javascript"></script>
    <script src="/Content/scripts/HoaDon/HoaDon.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        function DoPrintHoaDon() {
            var idHoaDon = $("#IdHoaDon").val();
            $.ajax({
                url: "/Report/InReport",
                data: { idHoaDon: idHoaDon },
                success: function() {},
                error: function() {
                    HienThongBao("Không xuất được hóa đơn. Hãy thử lại.");
                }
            });
        }

        $(document).ready(function () {
            LoadMonChonAjax();
            //TimKiemMonAn();
            LoadBanGhep();

            $("input[id^='SoLuong']").change(function () {
                var value = $(this).val();
                if (!(value > 0 && value < 1000)) {
                    $(this).val(1);
                }
            });

            $("#SearchMonAn").keypress(function (e) {
                if (e.keyCode == 13) {
                    e.preventDefault();
                    $(this).autocomplete('close');
                    TimKiemMonAn();
                }
            });
            
            $("#SearchMonAn").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/ThucDon/AutoCompleteMonAn/",
                        type: "POST",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function(item) {
                                return { label: item.Ten, value: item.Ten, id:item.Id };
                            }));
                        }
                    });
                },
                messages: {
                    noResults: "", results: ""
                },
                select: function (a, b) {
                    TimKiemMonAn();
                }
            });
        });

    </script>
    
</asp:Content>
